<template>
  <div class="student">
    <el-card class="box-card">
      <div slot="header">
        <span>学生表</span>
        <el-button style="float: right;" size="small" type="success" round v-on:click="getStudentAll">刷 新</el-button>
      </div>
      <div>
        <!--  添加  -->
        <el-popover style="float: left;" placement="left" width="400" trigger="click" class="click-button-save">
          <el-button type="primary" slot="reference">添 加</el-button>
          <!--  表单  -->
          <el-form ref="studentSaveTextRef" :model="studentSaveText"
                   label-width="60px" style="width: 90%">
            <el-form-item label="姓名">
              <el-input v-model="studentSaveText.studentName"/>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="studentSaveText.studentAge"/>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="studentSaveText.studentSex">
                <el-radio label="男" value="男"/>
                <el-radio label="女" value="女"/>
                <el-radio label="保密" value="保密"/>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="班级">
              <el-select v-model="studentSaveText.classRoom" placeholder="请选择班级">
                <div v-for="c in ClassRoomList" v-bind:key="c.classRoomId">
                  <el-option :label="c.classRoomName" :value="c" />
                </div>
              </el-select>
            </el-form-item>

            <!--  提交  -->
            <el-form-item>
              <el-button type="primary" size="small" v-on:click="saveStudent">添 加 提 交</el-button>
            </el-form-item>
          </el-form>
        </el-popover>
      </div>
    </el-card>
    <el-table :data="StudentList" border stripe max-height="600" style="width: 100%">
      <el-table-column label="Name" prop="studentName" width="180"/>
      <el-table-column label="Age" prop="studentAge" width="180"/>
      <el-table-column label="Sex" prop="studentSex" width="180"/>
      <el-table-column label="家长" prop="patriarch" width="180">
        <template slot-scope="p">
          {{ p.row.patriarch.patriarchName }}
        </template>
      </el-table-column>
      <el-table-column label="班级" prop="classRoom" width="180">
        <template slot-scope="c">
          {{ c.row.classRoom.classRoomName}}
        </template>
      </el-table-column>
      <el-table-column label="教师" prop="teacherList">
        <template slot-scope="t1">
          <div v-for="t in t1.row.teacherList" v-bind:key="t.teacherId">
            <template>
              <el-tag type="success" class="name-tag">{{ t.teacherName }}</el-tag>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="230">
        <template slot-scope="s">
          <el-button type="warning" size="small" v-on:click="removeStudent(s.$index, StudentList)"
                     class="click-button">移 除</el-button>
          <el-button type="danger" size="small" v-on:click="notifyMsgErrorAutoOff('无权限')"
                     class="click-button">删 除</el-button>
          <!--  更新  -->
          <el-popover placement="left" width="400" trigger="click" class="click-button">
            <!--            <el-button type="success" size="small" slot="reference" @click="studentUpdate = s.row">更 新</el-button>-->
            <el-button type="success" size="small" slot="reference">更 新</el-button>
            <!--  表单  -->
            <el-form ref="studentUpdateRef" :model="s.row"
                     label-width="60px" style="width: 90%">
              <el-form-item label="姓名">
                <el-input v-model="s.row.studentName"/>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input v-model="s.row.studentAge"/>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="s.row.studentSex">
                  <el-radio label="男" value="男"/>
                  <el-radio label="女" value="女"/>
                  <el-radio label="保密" value="保密"/>
                </el-radio-group>
              </el-form-item>
              <!--              <el-form-item label="班级">-->
              <!--                <el-select v-model="s.row.classRoom" placeholder="请选择班级">-->
              <!--                  <div v-for="c in ClassRoomList" v-bind:key="c.classRoomId">-->
              <!--                    <el-option :label="c.classRoomName" :value="c" />-->
              <!--                  </div>-->
              <!--                </el-select>-->
              <!--              </el-form-item>-->

              <!--  提交  -->
              <el-form-item>
                <el-button type="success" size="small" v-on:click="updateStudent(s.row)">更 新 提 交</el-button>
              </el-form-item>
            </el-form>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  /* eslint-disable */
  name: 'Student',
  data() {
    return {
      // list
      StudentList: [
        {
          studentId: 1,
          studentName: '李四',
          studentAge: 14,
          studentSex: '男',
          patriarch: '',
          classRoom: '',
          teacherList: []
        },
        {
          studentId: 2,
          studentName: '李四',
          studentAge: 14,
          studentSex: '男',
          patriarch: '',
          classRoom: '',
          teacherList: []
        },
        {
          studentId: 3,
          studentName: '李四',
          studentAge: 14,
          studentSex: '男',
          patriarch: '',
          classRoom: '',
          teacherList: []
        }
      ],
      TeacherList: [
        {
          teacherId: 11,
          teacherName: '删除测试',
          teacherAge: 35,
          teacherSex: '女',
          teacherCourse: '语文',
        },
        {
          teacherId: 14,
          teacherName: '黄芳',
          teacherAge: 35,
          teacherSex: '女',
          teacherCourse: '英语',
        },
        {
          teacherId: 15,
          teacherName: '黄芳',
          teacherAge: 35,
          teacherSex: '女',
          teacherCourse: '数学',
        }
      ],
      ClassRoomList: [
        {
          classRoomId: 5,
          classRoomName: '班级删除测试',
          classRoomLocation: 'nn',
          classRoomCapacity: 45,
          classRoomGrade: 'nn'
        },
        {
          classRoomId: 6,
          classRoomName: '班级删除测试',
          classRoomLocation: 'nn',
          classRoomCapacity: 56,
          classRoomGrade: 'nn'
        },
        {
          classRoomId: 7,
          classRoomName: '班级删除测试',
          classRoomLocation: 'nn',
          classRoomCapacity: 56,
          classRoomGrade: 'nn'
        },
        {
          classRoomId: 8,
          classRoomName: '班级删除测试',
          classRoomLocation: 'nn',
          classRoomCapacity: 56,
          classRoomGrade: 'nn'
        }
      ],
      // student 的 增删查改
      studentSaveText: {
        studentName: '学生添加测试',
        studentAge: 14,
        studentSex: '男',
        patriarch: {
          patriarchId: 11,
          patriarchName: '',
          patriarchAge: '',
          patriarchSex: '',
          patriarchPhone: '',
          patriarchAddress: '',
        },
        classRoom: {
          classRoomId: 12,
          classRoomName: '',
          classRoomLocation: '',
          classRoomCapacity: '',
          classRoomGrade: ''
        },
        teacherList: [
          {
            teacherId: 11,
            teacherName: '',
            teacherAge: '',
            teacherSex: '',
            teacherCourse: '',
          },
          {
            teacherId: 14,
            teacherName: '',
            teacherAge: '',
            teacherSex: '',
            teacherCourse: '',
          },
          {
            teacherId: 10,
            teacherName: '',
            teacherAge: '',
            teacherSex: '',
            teacherCourse: '',
          }
        ]
      },
      studentSaveTextRef: {
        studentName: '学生添加测试',
        studentAge: 14,
        studentSex: '男',
        patriarch: {
          patriarchId: '',
          patriarchName: '',
          patriarchAge: '',
          patriarchSex: '',
          patriarchPhone: '',
          patriarchAddress: '',
        },
        classRoom: {
          classRoomId: 12,
          classRoomName: '',
          classRoomLocation: '',
          classRoomCapacity: '',
          classRoomGrade: ''
        },
        teacherList: [
          {
            teacherId: 11,
            teacherName: '',
            teacherAge: '',
            teacherSex: '',
            teacherCourse: '',
          },
          {
            teacherId: 14,
            teacherName: '',
            teacherAge: '',
            teacherSex: '',
            teacherCourse: '',
          },
          {
            teacherId: 10,
            teacherName: '',
            teacherAge: '',
            teacherSex: '',
            teacherCourse: '',
          }
        ]
      },
      studentUpdate: {},
      studentUpdateRef: {},
      // patriarch 的 增删查改
      patriarchSaveText: {
        patriarchName: '家长添加测试',
        patriarchAge: 40,
        patriarchSex: '男',
        patriarchPhone: 15612348907,
        patriarchAddress: '中国',
      },
      patriarchSaveTextRef: {
        patriarchName: '家长添加测试',
        patriarchAge: 40,
        patriarchSex: '男',
        patriarchPhone: 15612348907,
        patriarchAddress: '中国',
      }
    }
  },
  created() {
    // 加载页面时 启动
    this.notifyMsgSuccessAutoOff("启动成功");
    this.notifyMsgInfoAutoOff("消息");

    this.getStudentAll();
    this.getClassRoomAll();
    this.getTeacherAll();
  },
  methods: {
    msgError(a) {
      this.$message({
        type: "error",
        showClose: true,
        message: a,
      });
    },
    msgSuccess(a) {
      this.$message({
        type: "success",
        showClose: true,
        message: a,
      });
    },
    msgInfo(a) {
      this.$message({
        type: "info",
        showClose: true,
        message: a,
      });
    },
    msgWarning(a) {
      this.$message({
        type: "warning",
        showClose: true,
        message: a
      });
    },
    // 不会自动关闭
    notifyMsgError(a){
      this.$notify({
        title: '错误',
        // 存在时间 ms，为零表示 一直存在
        duration: 0,
        type: "error",
        message: a
      });
    },
    // 自动关闭
    notifyMsgErrorAutoOff(a){
      this.$notify({
        title: '错误',
        duration: 3000,
        type: "error",
        message: a
      });
    },
    notifyMsgSuccess(a){
      this.$notify({
        title: '提示',
        duration: 0,
        type: "success",
        message: a
      });
    },
    notifyMsgSuccessAutoOff(a){
      this.$notify({
        title: '提示',
        // 存在时间 ms
        duration: 2000,
        type: "success",
        message: a
      });
    },
    notifyMsgInfo(a){
      this.$notify({
        title: '消息',
        duration: 0,
        type: "info",
        message: a,
        // 自定义弹出位置，'bottom-left' 左下，'bottom-right' 右下，'top-left' 左上，默认是 右上
        position: 'bottom-right'
      });
    },
    notifyMsgInfoAutoOff(a){
      this.$notify({
        title: '消息',
        duration: 2000,
        type: "info",
        message: a,
        // 自定义弹出位置，'bottom-left' 左下，'bottom-right' 右下，'top-left' 左上，默认是 右上
        position: 'bottom-right'
      });
    },
    notifyMsgWarning(a){
      this.$notify({
        title: '警告',
        duration: 0,
        type: "warning",
        message: a,
        position: 'bottom-right'
      });
    },
    notifyMsgWarningAutoOff(a){
      this.$notify({
        title: '警告',
        duration: 2000,
        type: "warning",
        message: a,
        position: 'bottom-right'
      });
    },
    async getStudentAll(){
      const { data: studentAllResult } = await this.$http.get('/student/select');

      const studentAllData = studentAllResult.data;
      if (studentAllResult.code === 200) {
        this.StudentList = studentAllData;
      } else {
        this.msgError(studentAllResult.msg);
      }
      // console.log(studentAllResult)
    },
    async getClassRoomAll(){
      const { data: classRoomAllResult } = await this.$http.get('/classRoom/select');

      const classRoomAllData = classRoomAllResult.data;
      if (classRoomAllResult.code === 200) {
        this.ClassRoomList = classRoomAllData;
      } else {
        this.notifyMsgError(classRoomAllResult.msg);
      }
      // console.log(classRoomAllResult)
    },
    async getTeacherAll(){
      const { data: teacherAllResult } = await this.$http.get('/teacher/select');

      const teacherAllData = teacherAllResult.data;
      if (teacherAllResult.code === 200) {
        this.TeacherList = teacherAllData;
      } else {
        this.notifyMsgError(teacherAllResult.msg);
      }
      // console.log(teacherAllResult)
    },
    async saveStudent(){
      const { data: studentSaveResult } = await this.$http.post('/student/save',
        this.studentSaveText);
      const studentSaveData = studentSaveResult.data;
      if (studentSaveResult.code === 200) {
        this.notifyMsgSuccessAutoOff(studentSaveResult.msg)
      } else {
        this.notifyMsgError(studentSaveResult.msg);
      }
      console.log(studentSaveData);
    },
    async updateStudent(student){
      const { data: studentUpdateResult } = await this.$http.post('/student/update',
        student);
      const studentUpdateData = studentUpdateResult.data;
      if (studentUpdateResult.code === 200) {
        this.notifyMsgSuccessAutoOff(studentUpdateResult.msg)
      } else {
        this.notifyMsgError(studentUpdateResult.msg);
      }
      console.log(studentUpdateData);
    },
    async deleteStudent(id){
      const { data: studentDeleteResult } = await this.$http.delete('/student/save/'+ id);
      const studentDeleteData = studentDeleteResult.data;
      if (studentDeleteResult.code === 200) {
        this.notifyMsgSuccessAutoOff(studentDeleteResult.msg)
      } else {
        this.notifyMsgError(studentDeleteResult.msg);
      }
      console.log(studentDeleteData);
    },
    // 移除 data 中的数据列表中的数据行
    async removeStudent(index, students){
      // index，当前数据的 索引
      // students，data中的数据集（如：StudentList）
      students.splice(index, 1)
    },
    async savePatriarch(){
      const { data: patriarchSaveResult } = await this.$http.post('/patriarch/save',
        this.patriarchSaveText);
      const patriarchSaveData = patriarchSaveResult.data;
      if (patriarchSaveResult.code === 200) {
        this.notifyMsgSuccessAutoOff(patriarchSaveResult.msg)
      } else {
        this.notifyMsgError(patriarchSaveResult.msg);
      }
      // console.log(patriarchSaveData);
      console.log(patriarchSaveData);
    }
  }
}
</script>

<style scoped>
  .student {
    margin: 10px;
  }

  .box-card {
    margin-bottom: 20px;
  }

  .click-button {
    margin: 5px;
  }

  .click-button-save {
    margin: 20px;
  }

  .name-tag {
    margin: 3px;
  }
</style>
